<template>
  <view :class="theme" style="overflow-y: hidden;">
    <view class="f1 fd-row m-20" style="overflow-y: hidden;">
      <view class="br-12 oh" style="min-width: 240px; width: 300px;">
        <label class="height-120 bgc-hover pl-30 pr-30 color-inverse fs-30">实时成交</label>
        <view class="f1 oh bgc-primary">
          <view class="f1 oh text-center mb-18">
            <view class="fd-row m-12 fs-30">
              <text class="f1 fw-600">价格</text>
              <text class="f1 fw-600">数量</text>
              <text class="f1 fw-600">时间</text>
            </view>
            <scroll-view scroll-y class="f1 oh">
              <view v-for="item in liveTradeList" class="fd-row fs-26 lh-60">
                <text :class="`f1 color-${item.type}`">{{ item.price }}</text>
                <text class="f1">{{ item.number }}</text>
                <text class="f1">{{ item.time }}</text>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
      <scroll-view class="f1 ml-20 br-12 oh" scroll-y style="min-width: 1000px; height: 100%;">
        <view class="br-12 oh">
          <label class="height-120 bgc-hover pl-30 pr-30 color-inverse fs-30">账户信息</label>
          <view class="f1 bgc-primary oh p-20">
            <view class="fd-row flex-wrap">
              <label class="bgc-hover jc-center m-4" style="width: calc((100% - 32rpx) / 4); height: 50px;" />
              <label class="bgc-hover jc-center m-4 color-buy" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                可用
              </label>
              <label class="bgc-hover jc-center m-4 color-sell" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                冻结
              </label>
              <label class="bgc-hover jc-center m-4 color-primary" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                总量
              </label>
            </view>
            <view class="fd-row flex-wrap">
              <label class="bgc-hover jc-center m-4" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                资金
              </label>
              <label class="bgc-hover jc-center m-4" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                {{ makerAccount.tokenAmount || 0 }}
              </label>
              <label class="bgc-hover jc-center m-4" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                {{ makerAccount.frozenTokenAmount || 0 }}
              </label>
              <label class="bgc-hover jc-center m-4" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                {{ makerAccount.amountTotal || 0 }}
              </label>
            </view>
            <view class="fd-row flex-wrap">
              <label class="bgc-hover jc-center m-4" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                筹码
              </label>
              <label class="bgc-hover jc-center m-4" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                {{ makerAccount.quoteAmount || 0 }}
              </label>
              <label class="bgc-hover jc-center m-4" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                {{ makerAccount.frozenQuoteAmount || 0 }}
              </label>
              <label class="bgc-hover jc-center m-4" style="width: calc((100% - 32rpx) / 4); height: 50px;">
                {{ makerAccount.counterTotal || 0 }}
              </label>
            </view>
          </view>
        </view>
        <view class="br-12 oh mt-20">
          <view class="fd-row ai-center height-120 bgc-hover pl-30 pr-30 color-inverse fs-30">
            <text class="f1">智能对敲</text>
            <label>
              <switch @change="changeSwitchStatus('exchangeStatus', $event)" :checked="!!switchStatus.exchangeStatus"
                style="transform: scale(0.7);" />
              <text class="fs-24">{{ ["已关闭", "已开启"][+switchStatus.exchangeStatus] }}</text>
            </label>
          </view>
          <view class="f1 bgc-primary oh p-20">
            <view class="fd-row ai-center ml-30 mr-30">
              <text class="color-grey">当前参数：</text>

              <view v-if="zndq.intervalMin" class="f1 fd-row ai-center jc-sa">
                <text class="color-inverse ml-12 mr-12">
                  间隔时间(s)：{{ zndq.intervalMin }} - {{ zndq.intervalMax }}
                </text>

                <view v-for="(item, index) in zndq.details" :key="index" class="color-inverse ml-12 mr-12 lh-2">
                  <text>时间段：{{ item.beginTime }} - {{ item.endTime }}</text>
                  <text>成交量：{{ item.volumeMin }} - {{ item.volumeMax }}</text>
                </view>
              </view>
              <text v-else class="f1 color-placeholder fs-24 ml-30 mr-30">暂无</text>

              <button @click="switchPopup('setParams_zndq', 1)" hover-class="tap-hover"
                class="fs-30 bgc-btn color-inverse lh-2">修改参数</button>
            </view>
            <view class="height-4 bgc-hover" style="margin: 30rpx 60rpx;" />
          </view>
        </view>

        <view class="br-12 oh mt-20">
          <view class="fd-row ai-center height-120 bgc-hover pl-30 pr-30 color-inverse fs-30">
            <text class="f1">活跃卖盘</text>
            <label>
              <switch @change="changeSwitchStatus('sellStatus', $event)" :checked="!!switchStatus.sellStatus"
                style="transform: scale(0.7);" />
              <text class="fs-24">{{ ["已关闭", "已开启"][+switchStatus.sellStatus] }}</text>
            </label>
          </view>
          <view class="f1 bgc-primary oh p-20">
            <view class="fd-row ai-center ml-30 mr-30">
              <text class="color-grey">当前参数：</text>
              <view v-if="hymp0.intervalTime" class="f1 fd-row ai-center jc-sa">
                <text class="color-inverse ml-12 mr-12">
                  间隔时间(s)：{{ hymp0.intervalTime }}
                </text>

                <view class="color-inverse ml-12 mr-12 lh-2">
                  <text>档位区间：{{ hymp0.indexStart }} - {{ hymp0.indexEnd }}</text>
                  <text>成交量：{{ hymp0.volumeMin }} - {{ hymp0.volumeMax }}</text>
                </view>
              </view>
              <text v-else class="f1 color-grey fs-24 ml-30 mr-30">暂无</text>
              <button @click="switchPopup('setParams_hymp0', 1)" hover-class="tap-hover"
                class="fs-30 bgc-btn color-inverse lh-2">修改参数</button>
            </view>
            <view class="height-4 bgc-hover" style="margin: 30rpx 60rpx;" />
          </view>
        </view>

        <view class="br-12 oh mt-20">
          <view class="fd-row ai-center height-120 bgc-hover pl-30 pr-30 color-inverse fs-30">
            <text class="f1">活跃买盘</text>
            <label>
              <switch @change="changeSwitchStatus('buyStatus', $event)" :checked="!!switchStatus.buyStatus"
                style="transform: scale(0.7);" />
              <text class="fs-24">{{ ["已关闭", "已开启"][+switchStatus.buyStatus] }}</text>
            </label>
          </view>
          <view class="f1 bgc-primary oh p-20">
            <view class="fd-row ai-center ml-30 mr-30">
              <text class="color-grey">当前参数：</text>
              <view v-if="hymp1.intervalTime" class="f1 fd-row ai-center jc-sa">
                <text class="color-inverse ml-12 mr-12">
                  间隔时间(s)：{{ hymp1.intervalTime }}
                </text>

                <view class="color-inverse ml-12 mr-12 lh-2">
                  <text>档位区间：{{ hymp1.indexStart }} - {{ hymp1.indexEnd }}</text>
                  <text>成交量：{{ hymp1.volumeMin }} - {{ hymp1.volumeMax }}</text>
                </view>
              </view>
              <text v-else class="f1 color-grey fs-24 ml-30 mr-30">暂无</text>
              <button @click="switchPopup('setParams_hymp1', 1)" hover-class="tap-hover"
                class="fs-30 bgc-btn color-inverse lh-2">修改参数</button>
            </view>
            <view class="height-4 bgc-hover" style="margin: 30rpx 60rpx;" />
          </view>
        </view>

        <view class="br-12 oh mt-20">
          <view class="fd-row ai-center height-120 bgc-hover pl-30 pr-30 color-inverse fs-30">
            <text class="f1">区间震荡</text>
            <label>
              <switch @change="changeSwitchStatus('repeatStatus', $event)" :checked="!!switchStatus.repeatStatus"
                style="transform: scale(0.7);" />
              <text class="fs-24">{{ ["已关闭", "已开启"][+switchStatus.repeatStatus] }}</text>
            </label>
          </view>
          <view class="f1 bgc-primary oh p-20">
            <view class="fd-row ai-center ml-30 mr-30">
              <text class="color-grey">当前参数：</text>
              <view v-if="qjzd.highPrice" class="f1 fd-row ai-center jc-sa">
                <view class="color-inverse ml-12 mr-12 lh-2">
                  <text>最高价：{{ qjzd.highPrice }}</text>
                  <text>最低价：{{ qjzd.lowPrice }}</text>
                </view>
                <text class="color-inverse ml-12 mr-12">
                  深度数量：{{ qjzd.depth }}
                </text>
                <view class="color-inverse ml-12 mr-12 lh-2">
                  <text>最大买入量：{{ qjzd.buyAmount }}</text>
                  <text>最大卖出量：{{ qjzd.sellAmount }}</text>
                </view>
                <view class="color-inverse ml-12 mr-12 lh-2">
                  <text>单笔最大买入：{{ qjzd.buy }}</text>
                  <text>最大换筹成本：{{ qjzd.cost }}</text>
                </view>
              </view>
              <text v-else class="f1 color-grey fs-24 ml-30 mr-30">暂无</text>
              <button @click="switchPopup('setParams_qjzd', 1)" hover-class="tap-hover"
                class="fs-30 bgc-btn color-inverse lh-2">
                修改参数
              </button>
            </view>
            <view class="height-4 bgc-hover" style="margin: 30rpx 60rpx;" />
          </view>
        </view>

        <view class="br-12 oh mt-20">
          <view class="fd-row ai-center height-120 bgc-hover pl-30 pr-30 color-inverse fs-30">
            <text class="f1">跟随主流币</text>
            <label>
              <switch @change="changeSwitchStatus('followStatus', $event)" :checked="!!switchStatus.followStatus"
                style="transform: scale(0.7);" />
              <text class="fs-24">{{ ["已关闭", "已开启"][+switchStatus.followStatus] }}</text>
            </label>
          </view>
          <view class="f1 bgc-primary oh p-20">
            <view class="fd-row ai-center ml-30 mr-30">
              <text class="color-grey">当前参数：</text>
              <view v-if="gszlb.maxPrice" class="f1 fd-row ai-center jc-sa">
                <view class="color-inverse ml-12 mr-12 lh-2">
                  <text>交易所：{{ gszlb.bourseName }}</text>
                  <text>交易对：{{ gszlb.symbolName }}</text>
                </view>
                <view class="color-inverse ml-12 mr-12 lh-2">
                  <text>最高价：{{ gszlb.maxPrice }}</text>
                  <text>最低价：{{ gszlb.minPrice }}</text>
                </view>
                <text class="color-inverse ml-12 mr-12">
                  倍率：{{ gszlb.rate }}
                </text>
                <text class="color-inverse ml-12 mr-12">
                  周期：{{ gszlb.period }}
                </text>
                <text class="color-inverse ml-12 mr-12">
                  深度下单数量：{{ gszlb.depth }}
                </text>
                <text class="color-inverse ml-12 mr-12">
                  跟随最小波动：{{ gszlb.exchangePrecision }}
                </text>
              </view>
              <text v-else class="f1 color-grey fs-24 ml-30 mr-30">暂无</text>
              <button @click="switchPopup('setParams_gszlb', 1)" hover-class="tap-hover"
                class="fs-30 bgc-btn color-inverse lh-2">
                修改参数
              </button>
            </view>
            <view class="height-4 bgc-hover" style="margin: 30rpx 60rpx;" />
          </view>
        </view>

      </scroll-view>
    </view>

    <uni-popup :ref="(e: any) => setRef(e, 'setParams_zndq')" :is-mask-click="false">
      <view class="br-20 oh">
        <view class="bgc-hover fd-row jc-sb ai-center">
          <text class="fs-32 p-30">智能对敲</text>
          <uni-icons @click="switchPopup('setParams_zndq', 0)" type="closeempty" size="20" color="#fff"
            style="cursor: pointer;" class="p-30" />
        </view>
        <view class="bgc-primary" style="padding: 30px;">
          <view class="fd-row ai-center">
            <text class="text-right" style="width: 100px;">时间间隔：</text>
            <view class="fd-row ai-center" style="width: 300px;">
              <uni-easyinput v-model="form_zndq.intervalMin" type="number" placeholder="最小间隔时间" />
              <text class="m-6">—</text>
              <uni-easyinput v-model="form_zndq.intervalMax" type="number" placeholder="最大间隔时间" />
            </view>
            <text class="ml-12">秒</text>
          </view>

          <view v-for="(item, index) in form_zndq.details" :key="index" class="fd-row ai-center mt-30">
            <view class="ai-end" style="width: 100px;">
              <label style="height: 38px;">时间范围：</label>
              <label style="height: 38px;">成交量范围：</label>
            </view>
            <view class="mr-12">
              <view class="fd-row ai-center" style="width: 300px; height: 37px;">
                <picker @change="changeTime({ $event, index, key: 'beginTime' })" mode="time" class="f1">
                  <label class="bgc-inverse br-8 fs-24 p-12"
                    :style="{ color: item.beginTime ? `#000` : `#808080`, height: `37px` }">
                    {{ item.beginTime || "开始时间" }}
                  </label>
                </picker>
                <text class="m-6">—</text>
                <picker @change="changeTime({ $event, index, key: 'endTime' })" mode="time" class="f1">
                  <label class="bgc-inverse br-8 fs-24 p-12"
                    :style="{ color: item.endTime ? `#000` : `#808080`, height: `37px` }">
                    {{ item.endTime || "结束时间" }}
                  </label>
                </picker>
              </view>
              <view class="fd-row ai-center mt-12" style="width: 300px; height: 37px;">
                <uni-easyinput v-model="item.volumeMin" type="number" placeholder="最小成交量" />
                <text class="m-6">—</text>
                <uni-easyinput v-model="item.volumeMax" type="number" placeholder="最大成交量" />
              </view>
            </view>
            <uni-icons @click="setScope(index)" style="cursor: pointer;" :type="index ? 'minus' : 'plus'" size="30"
              color="#fff" />
          </view>

          <button @click="submitParams_zndq" hover-class="tap-hover" class="bgc-btn color-inverse fs-32"
            style="width: 300px; margin: 30px 0 0 100px;">设置参数</button>
        </view>
      </view>
    </uni-popup>

    <uni-popup :ref="(e: any) => setRef(e, 'setParams_hymp0')" :is-mask-click="false">
      <view class="br-20 oh">
        <view class="bgc-hover fd-row jc-sb ai-center">
          <text class="fs-32 p-30">活跃卖盘</text>
          <uni-icons @click="switchPopup('setParams_hymp0', 0)" type="closeempty" size="20" color="#fff"
            style="cursor: pointer;" class="p-30" />
        </view>
        <view class="bgc-primary" style="padding: 30px;">
          <view class="fd-row ai-center">
            <text class="text-right" style="width: 100px;">时间间隔：</text>
            <view class="fd-row ai-center" style="width: 300px;">
              <uni-easyinput v-model="form_hymp0.intervalTime" type="number" placeholder="间隔时间" />
            </view>
            <text class="ml-12">秒</text>
          </view>

          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 100px;">档位范围：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_hymp0.indexStart" type="number" placeholder="最小档位" />
              <text class="m-6">—</text>
              <uni-easyinput v-model="form_hymp0.indexEnd" type="number" placeholder="最大档位" />
            </view>
          </view>

          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 100px;">成交量范围：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_hymp0.volumeMin" type="number" placeholder="最小成交量" />
              <text class="m-6">—</text>
              <uni-easyinput v-model="form_hymp0.volumeMax" type="number" placeholder="最大成交量" />
            </view>
          </view>

          <button @click="submitParams_hymp0" hover-class="tap-hover" class="bgc-btn color-inverse fs-32"
            style="width: 300px; margin: 30px 0 0 100px;">设置参数</button>
        </view>
      </view>
    </uni-popup>

    <uni-popup :ref="(e: any) => setRef(e, 'setParams_hymp1')" :is-mask-click="false">
      <view class="br-20 oh">
        <view class="bgc-hover fd-row jc-sb ai-center">
          <text class="fs-32 p-30">活跃买盘</text>
          <uni-icons @click="switchPopup('setParams_hymp1', 0)" type="closeempty" size="20" color="#fff"
            style="cursor: pointer;" class="p-30" />
        </view>
        <view class="bgc-primary" style="padding: 30px;">
          <view class="fd-row ai-center">
            <text class="text-right" style="width: 100px;">时间间隔：</text>
            <view class="fd-row ai-center" style="width: 300px;">
              <uni-easyinput v-model="form_hymp1.intervalTime" type="number" placeholder="间隔时间" />
            </view>
            <text class="ml-12">秒</text>
          </view>

          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 100px;">档位范围：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_hymp1.indexStart" type="number" placeholder="最小档位" />
              <text class="m-6">—</text>
              <uni-easyinput v-model="form_hymp1.indexEnd" type="number" placeholder="最大档位" />
            </view>
          </view>

          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 100px;">成交量范围：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_hymp1.volumeMin" type="number" placeholder="最小成交量" />
              <text class="m-6">—</text>
              <uni-easyinput v-model="form_hymp1.volumeMax" type="number" placeholder="最大成交量" />
            </view>
          </view>

          <button @click="submitParams_hymp1" hover-class="tap-hover" class="bgc-btn color-inverse fs-32"
            style="width: 300px; margin: 30px 0 0 100px;">设置参数</button>
        </view>
      </view>
    </uni-popup>

    <uni-popup :ref="(e: any) => setRef(e, 'setParams_qjzd')" :is-mask-click="false">
      <view class="br-20 oh">
        <view class="bgc-hover fd-row jc-sb ai-center">
          <text class="fs-32 p-30">区间震荡</text>
          <uni-icons @click="switchPopup('setParams_qjzd', 0)" type="closeempty" size="20" color="#fff"
            style="cursor: pointer;" class="p-30" />
        </view>
        <view class="bgc-primary" style="padding: 30px;">
          <view class="fd-row ai-center">
            <text class="text-right" style="width: 100px;">价格：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_qjzd.lowPrice" type="number" placeholder="最低价" />
              <text class="m-6">—</text>
              <uni-easyinput v-model="form_qjzd.highPrice" type="number" placeholder="最高价" />
            </view>
          </view>
          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 100px;">深度：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_qjzd.depth" type="number" placeholder="深度数量" />
            </view>
          </view>
          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 100px;">最大买入量：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_qjzd.buyAmount" type="number" placeholder="最大买入量" />
            </view>
          </view>
          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 100px;">最大卖出量：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_qjzd.sellAmount" type="number" placeholder="最大卖出量" />
            </view>
          </view>
          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 100px;">单笔最大买入：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_qjzd.buy" type="number" placeholder="单笔最大买入" />
            </view>
          </view>
          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 100px;">最大换筹成本：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_qjzd.cost" type="number" placeholder="最大换筹成本" />
            </view>
          </view>

          <button @click="submitParams_qjzd" hover-class="tap-hover" class="bgc-btn color-inverse fs-32"
            style="width: 300px; margin: 30px 0 0 100px;">设置参数</button>
        </view>
      </view>
    </uni-popup>

    <uni-popup :ref="(e: any) => setRef(e, 'setParams_gszlb')" :is-mask-click="false">
      <view class="br-20 oh">
        <view class="bgc-hover fd-row jc-sb ai-center">
          <text class="fs-32 p-30">跟随主流币</text>
          <uni-icons @click="switchPopup('setParams_gszlb', 0)" type="closeempty" size="20" color="#fff"
            style="cursor: pointer;" class="p-30" />
        </view>
        <view class="bgc-primary" style="padding: 30px;">
          <view class="fd-row ai-center mt-20">
            <text class="text-right" style="width: 120px;">跟随交易所：</text>
            <picker @change="changeBourse" :range="gszlb_pickerData.bourse" range-key="bourseName" class="f1"
              mode="selector">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input v-model="form_gszlb.bourseId.showValue" class="fs-28 f1 color-normal" placeholder="选择交易所"
                  placeholderStyle="font-size: 26rpx; color: #999;" disabled>
                <uni-icons type="bottom" />
              </label>
            </picker>
          </view>
          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 120px;">参考交易对：</text>
            <picker @change="changeTransactionPair" :range="gszlb_pickerData.transactionPair" range-key="symbolName"
              class="f1" mode="selector">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input v-model="form_gszlb.symbolId.showValue" class="fs-28 f1 color-normal" placeholder="选择交易对"
                  placeholderStyle="font-size: 26rpx; color: #999;" disabled>
                <uni-icons type="bottom" />
              </label>
            </picker>
          </view>
          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 120px;">跟随倍率：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_gszlb.rate" type="number" placeholder="跟随倍率" />
            </view>
          </view>
          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 120px;">跟随周期：</text>
            <picker @change="changePeriod" :range="gszlb_pickerData.periods" range-key="value" class="f1" mode="selector">
              <label class="bgc-inverse br-8 jc-sb" style="height: 35px; padding: 0 12px;">
                <input v-model="form_gszlb.period.showValue" class="fs-28 f1 color-normal" placeholder="选择跟随周期"
                  placeholderStyle="font-size: 26rpx; color: #999;" disabled>
                <uni-icons type="bottom" />
              </label>
            </picker>
          </view>
          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 120px;">深度下单量：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_gszlb.depth" type="number" placeholder="深度下单量" />
            </view>
          </view>
          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 120px;">价格：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_gszlb.minPrice" type="number" placeholder="最低价" />
              <text class="m-6">—</text>
              <uni-easyinput v-model="form_gszlb.maxPrice" type="number" placeholder="最高价" />
            </view>
          </view>

          <view class="fd-row ai-center mt-30">
            <text class="text-right" style="width: 120px;">跟随的最小波动：</text>
            <view class="fd-row ai-center" style="width: 300px; height: 37px;">
              <uni-easyinput v-model="form_gszlb.exchangePrecision" type="number" placeholder="跟随的最小波动" />
            </view>
          </view>

          <button @click="submitParams_gszlb" hover-class="tap-hover" class="bgc-btn color-inverse fs-32"
            style="width: 300px; margin: 30px 0 0 100px;">设置参数</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { reactive, computed } from "vue";
import store, { useMapState, math } from "@/common/libs/store";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { formatDate } from "@/common/libs/utils";

const { theme, items, itemIndex } = useMapState(["theme", "items", "itemIndex"]);

const refs = reactive<any>({});
const form_zndq = reactive({
  intervalMin: "",
  intervalMax: "",
  details: [
    {
      volumeMin: "",
      volumeMax: "",
      beginTime: "",
      endTime: ""
    }
  ]
});

const form_hymp0 = reactive({
  intervalTime: "",
  volumeMin: "",
  volumeMax: "",
  indexStart: "",
  indexEnd: ""
});

const form_hymp1 = reactive({
  intervalTime: "",
  volumeMin: "",
  volumeMax: "",
  indexStart: "",
  indexEnd: ""
});

const form_qjzd = reactive({
  highPrice: "",
  lowPrice: "",
  depth: "",
  buyAmount: "",
  sellAmount: "",
  buy: "",
  cost: "",
});

const form_gszlb = reactive({
  bourseId: {
    value: 0,
    showValue: ""
  },
  symbolId: {
    value: 0,
    showValue: ""
  },
  rate: "",
  period: {
    value: 0,
    showValue: ""
  },
  depth: "",
  minPrice: "",
  maxPrice: "",
  exchangePrecision: "",
});

const gszlb_pickerData = reactive({
  bourse: [] as any[],
  transactionPair: [] as any[],
  periods: [
    { key: 1, value: "5min" },
    { key: 2, value: "15min" },
    { key: 3, value: "30min" },
    { key: 3, value: "1hour" },
  ],
})

const liveTradeList = computed(() =>
  store.state.liveTradeData.map((item: any) => ({
    type: { ask: "sell", bid: "buy" }[item.type as string],
    price: item.price,
    number: item.vol,
    time: formatDate({ format: "h:m:s", timestamp: item.tradeTime })
  }))
);

const switchStatus = reactive({
  exchangeStatus: 0,
  sellStatus: 0,
  buyStatus: 0,
  repeatStatus: 0,
  followStatus: 0,
});

const makerAccount = reactive<AnyObject>({});
const zndq = reactive<AnyObject>({});
const hymp0 = reactive<AnyObject>({});
const hymp1 = reactive<AnyObject>({});
const qjzd = reactive<AnyObject>({});
const gszlb = reactive<AnyObject>({});


onLoad(() => {
  const { id: projectId } = items.value[itemIndex.value];
  uni.request({
    url: "/project/makerAccounts",
    data: { projectId },
    success({ data }: any) {
      Object.assign(makerAccount, data, {
        amountTotal: math.add(data.tokenAmount || 0, data.frozenTokenAmount || 0),
        counterTotal: math.add(data.quoteAmount || 0, data.frozenQuoteAmount || 0),
      });
    }
  });
  uni.request({
    url: "/strategy/switchStatus",
    data: { projectId },
    method: "POST",
    success({ data }: any) {
      switchStatus.exchangeStatus = +data.exchangeStatus;
      switchStatus.buyStatus = +data.buyStatus;
      switchStatus.sellStatus = +data.sellStatus;
      switchStatus.repeatStatus = +data.repeatStatus;
      switchStatus.followStatus = +data.followStatus;
    }
  });
  uni.request({
    url: "/project/bourses",
    success({ data }: any) {
      gszlb_pickerData.bourse = data;
    }
  });

  getZndq();
  getHymp0();
  getHymp1();
  getQjzd();
  getGszlb();

  store.dispatch("getLiveTrade");
});

onUnload(() => {
  store.state.liveTask && clearInterval(store.state.liveTask);
});

const changeBourse = ({ detail }: any) => {
  const { id: bourseId, bourseName } = gszlb_pickerData.bourse[detail.value];
  form_gszlb.bourseId.value = bourseId;
  form_gszlb.bourseId.showValue = bourseName;
  getTransactionPair();
}

const getTransactionPair = () => {
  if (!form_gszlb.bourseId.value) return;
  uni.showToast({ title: "loading...", icon: "loading", mask: true });
  uni.request({
    url: "/project/symbols",
    data: { bourseId: form_gszlb.bourseId.value },
    success({ data }: any) {
      uni.hideToast();
      gszlb_pickerData.transactionPair = data;
    }
  })
}

const changeTransactionPair = ({ detail }: any) => {
  const { id, symbolName } = gszlb_pickerData.transactionPair[detail.value];

  form_gszlb.symbolId.value = id;
  form_gszlb.symbolId.showValue = symbolName;
}

const changePeriod = ({ detail }: any) => {
  const { key, value } = gszlb_pickerData.periods[detail.value];

  form_gszlb.period.value = key;
  form_gszlb.period.showValue = value;
}

const getZndq = () => {
  uni.request({
    url: "/strategy/lastStrategy",
    data: { projectId: items.value[itemIndex.value].id },
    method: "POST",
    success({ data }: any) {
      Object.assign(zndq, data);
      Object.assign(form_zndq, {
        intervalMin: data.intervalMin,
        intervalMax: data.intervalMax,
        details: data.details.map((item: any) => ({
          beginTime: item.beginTime,
          endTime: item.endTime,
          volumeMin: item.volumeMin,
          volumeMax: item.volumeMax
        }))
      });
    }
  });
}

const getHymp0 = () => {
  uni.request({
    url: "/strategy/lastFillSellRule",
    method: "POST",
    data: { projectId: items.value[itemIndex.value].id },
    success({ data }) {
      Object.assign(hymp0, data);
      Object.assign(form_hymp0, data);
    },
  })
}
const getHymp1 = () => {
  uni.request({
    url: "/strategy/lastFillBuyRule",
    method: "POST",
    data: { projectId: items.value[itemIndex.value].id },
    success({ data }) {
      Object.assign(hymp1, data);
      Object.assign(form_hymp1, data);
    },
  })
}
const getQjzd = () => {
  uni.request({
    url: "/strategy/lastRepeatRule",
    method: "POST",
    data: { projectId: items.value[itemIndex.value].id },
    success({ data }) {
      Object.assign(qjzd, data);
      Object.assign(form_qjzd, data);
    },
  })
}
const getGszlb = () => {
  uni.request({
    url: "/strategy/lastFollowRule",
    method: "POST",
    data: { projectId: items.value[itemIndex.value].id },
    success({ data }: any) {
      Object.assign(gszlb, data);
      Object.assign(form_gszlb, {
        bourseId: {
          value: data.bourseId,
          showValue: data.bourseName
        },
        symbolId: {
          value: data.symbolId,
          showValue: data.symbolName,
        },
        rate: data.rate,
        period: {
          value: data.period,
          showValue: gszlb_pickerData.periods.find((item) => item.key === data.period)?.value
        },
        depth: data.depth,
        minPrice: data.minPrice,
        maxPrice: data.maxPrice,
        exchangePrecision: data.exchangePrecision,
      });

      getTransactionPair();
    },
  })
}

const setRef = (el: any, key: string) => el && (refs[key] = el);
const switchPopup = (popupKey: string, toggle: 0 | 1) => refs[popupKey]?.[["close", "open"][toggle]]?.();

const changeSwitchStatus = (type: keyof typeof switchStatus, { detail }: any) => {
  uni.showToast({ mask: true, icon: "loading" });
  uni.request({
    url: "/strategy/strategySwitch",
    method: "POST",
    data: { projectId: items.value[itemIndex.value]?.id, ...Object.assign(switchStatus, { [type]: +detail.value }) },
    success() {
      switchStatus[type] = +detail.value;
      uni.hideToast();
    }
  });
}
const setScope = (index: number) => {
  if (index) {
    form_zndq.details.splice(index, 1);
    return;
  }
  if (form_zndq.details.length >= 5) {
    uni.showToast({ title: "最多只能添加5个", icon: "error" });
    return;
  };
  form_zndq.details.unshift({
    volumeMin: "",
    volumeMax: "",
    beginTime: "",
    endTime: ""
  });
}
const changeTime = ({ $event, index, key }: {
  $event: any; index: number; key: "beginTime" | "endTime"
}) => {
  form_zndq.details[index][key] = $event.detail.value;
}

const submitParams_zndq = () => {
  const dataVerify = Object.values(form_zndq).every(item => {
    if (Array.isArray(item)) {
      return form_zndq.details.map(item => Object.values(item).every(Boolean)).every(Boolean);
    }
    return Boolean(item);
  });

  if (!dataVerify) {
    uni.showToast({ title: "请完善输入框内容", icon: "none" })
    return;
  }

  uni.request({
    url: "/strategy/new",
    method: "POST",
    data: { projectId: items.value[itemIndex.value].id, ...form_zndq },
    success() {
      getZndq();
      switchPopup("setParams_zndq", 0);
    }
  });
}

const submitParams_hymp0 = () => {
  const dataVerify = Object.values(form_hymp0).every((item: string | number) => (item || item === 0));

  if (!dataVerify) {
    uni.showToast({ title: "请完善输入框内容", icon: "none" })
    return;
  }

  uni.request({
    url: "/strategy/fillOrderList",
    method: "POST",
    data: { projectId: items.value[itemIndex.value].id, type: 1, ...form_hymp0 },
    success() {
      getHymp0();
      switchPopup("setParams_hymp0", 0);
    }
  });
}

const submitParams_hymp1 = () => {

  const dataVerify = Object.values(form_hymp1).every((item: string | number) => (item || item === 0));

  if (!dataVerify) {
    uni.showToast({ title: "请完善输入框内容", icon: "none" })
    return;
  }

  uni.request({
    url: "/strategy/fillOrderList",
    method: "POST",
    data: { projectId: items.value[itemIndex.value].id, type: 2, ...form_hymp1 },
    success() {
      getHymp1();
      switchPopup("setParams_hymp1", 0);
    }
  });

}

const submitParams_qjzd = () => {
  const dataVerify = Object.values(form_hymp1).every((item: string | number) => (item || item === 0));

  if (!dataVerify) {
    uni.showToast({ title: "请完善输入框内容", icon: "none" })
    return;
  }

  uni.request({
    url: "/strategy/repeatRule",
    method: "POST",
    data: { projectId: items.value[itemIndex.value].id, type: 2, ...form_qjzd },
    success() {
      getQjzd();
      switchPopup("setParams_qjzd", 0);
    }
  });
}

const submitParams_gszlb = () => {
  const form: any = {};
  const dataVerify = Object.keys(form_gszlb).every((key: string) => {
    if ((<any>form_gszlb)[key]?.value || (<any>form_gszlb)[key]) {
      form[key] = (<any>form_gszlb)[key]?.value || (<any>form_gszlb)[key];
      return true;
    }
    return false;
  });

  if (!dataVerify) return;

  uni.request({
    url: "/strategy/followRule",
    data: { projectId: items.value[itemIndex.value].id, ...form },
    method: "POST",
    success() {
      getGszlb();
      switchPopup("setParams_gszlb", 0);
    }
  })
}
</script>

<style lang="scss" scoped>
// scss
page {
  height: 100%;
  overflow: auto;
}

::v-deep {
  &.is-disabled .uni-easyinput__placeholder-class {
    color: $uni-text-color-placeholder;
  }
}
</style>